<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-arrow
      right-text="保存"
      @click-left="$router.back()"
      @click-right="onSave"
    />
    <van-cell-group>
      <van-cell title="头像" is-link @click="onShowFile">
        <van-image
          round
          width="30"
          height="30"
          :src="user.photo"
        />
        <input type="file" hidden ref="file" @change="onFileChange">
      </van-cell>
      <van-cell
        title="昵称"
        :value="user.name"
        is-link
        @click="isNameShow = true"
      />
      <van-cell
        title="性别"
        :value="user.gender===0 ? '男' : '女'"
        is-link
        @click="isGenerShow = true"
      />
      <van-cell
        title="生日"
        :value="user.birthday"
        is-link
        @click="isBirthdayShow = true"
      />
    </van-cell-group>
    <!-- 修改昵称 -->
    <van-dialog
      v-model="isNameShow"
      title="昵称修改"
      show-cancel-button
      @confirm="onNameConfirm"
    >
      <!--
        v-model 是
          :value="user.name"
          @input="user.name = 事件参数"
       -->
      <van-field
        :value="user.name"
        placeholder="请输入用户名"
        @input="inputName = $event"
      />
      <!-- $event就是时间参数 组件封装默认 -->
    </van-dialog>
    <!-- /修改昵称 -->

    <!-- 修改性别 -->
    <van-action-sheet
      v-model="isGenerShow"
      :actions="actions"
      @select="onGenderSelect"
      cancel-text="取消"
    />
    <!-- /修改性别 -->

     <!-- 修改生日 -->
    <van-popup
      v-model="isBirthdayShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @confirm="onBirthdayConfirm"
      />
    </van-popup>
    <!-- /修改生日 -->
  </div>
</template>

<script>
import {
  getProfile,
  updateUserPhoto,
  updateUserProfile
} from '@/api/user'
// 在script标签内无法使用vue的全局过滤器来时间格式化 需要引入使用
import dayjs from 'dayjs'

export default {
  name: 'UserIndex',
  data () {
    return {
      user: {},
      isNameShow: false,
      inputName: '',
      isGenerShow: false,
      actions: [
        { name: '男', value: 0 },
        { name: '女', value: 1 }
      ],
      isBirthdayShow: false,
      currentDate: new Date(),
      minDate: new Date(1970, 1, 1)
    }
  },
  computed: {
    // 这里使用计算属性 节省代码 下方可以使用this.file访问
    file () {
      return this.$refs.file
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    async loadProfile () {
      const res = await getProfile()
      this.user = res.data.data
    },
    onShowFile () {
      this.file.click()
    },
    onFileChange () {
      // 这里只是做了预览 并没有向后端发请求 当点击保存后才会保存起来
      this.user.photo = URL.createObjectURL(this.file.files[0])
    },
    onNameConfirm () {
      this.user.name = this.inputName
    },
    onGenderSelect (item) {
      // 组件默认参数item是点击的那个对象
      this.user.gender = item.value
      this.isGenerShow = false
    },
    onBirthdayConfirm (value) {
      // 组件默认参数value 为选中的时间 需要格式化
      // 引入dayjs工具 用法与moment相同
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.isBirthdayShow = false
    },
    async onSave () {
      // 保存图片等信息可能需要等待 给个加载提示
      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止
        forbidClick: true, // 是否禁止背景点击
        message: '保存中...' // 提示消息
      })
      // 由于接口问题 图片需要单独上传 就需要发送两个 图片和其他信息
      // 我们希望请求成功给予提示 失败也给予提示
      // 用到 try{这里不报错就请求成功, 如果报错就进入catch} catch () {给予失败提示}
      try {
        // 保存头像
        // 通过计算属性获取图片信息
        const fileObj = this.file.files[0]
        const fd = new FormData()
        // 判断是否更改了图片
        if (fileObj) {
          // 将图片信息以photo的为键名(接口要求) 添加到formData对象fd中
          fd.append('photo', fileObj)
        }
        await updateUserPhoto(fd)
        // 解构获取user内保存的用户更改后的参数
        const { name, gender, birthday } = this.user
        await updateUserProfile({
          name,
          gender,
          birthday
        })
        this.$toast.success('保存成功')
      } catch (err) {
        this.$toast.success('保存失败')
      }
    }
  }
}
</script>

<style>

</style>
